<template>
  <ElDrawer v-model="visible">
    <ElForm>
      <ElFormItem label>
        <ElTag>{{ leaveBill.leaveBillCode }}</ElTag>
      </ElFormItem>
      <ElFormItem label="请假类型">
        <ElSelect v-model="leaveBill.leaveType">
          <ElOption label="病假" value="sick"></ElOption>
          <ElOption label="年假" value="annual"></ElOption>
          <ElOption label="事假" value="issue"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="请假时间">
        <ElDatePicker type="datetimerange" v-model="leaveBill.timeRange"></ElDatePicker>
      </ElFormItem>
      <ElFormItem label="请假原因">
        <ElInput v-model="leaveBill.reason"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton @click="modify()" type="primary">修改请假条</ElButton>
      </ElFormItem>
    </ElForm>
  </ElDrawer>
</template>
<script lang="ts">
import type { LeaveBill, LeaveType } from '@/views/LeaveApply.vue'

/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
export type LeaveBillModify = LeaveBill & {
  timeRange?: Array<any> | null
}
export type leaveBillDto = {
  leaveType: LeaveType
  timeStart: Date | null
  timeEnd: Date | null
  reason: string | null
}

export default {
  name: 'LeaveModify',
  emits: ['postModify'],
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      // leaveBill 有13个属性是从数据库查出的一条信息
      // 页面上用于与用户交互展示的标签
      leaveBill: {} as LeaveBillModify,

      leaveBillDto: {} as leaveBillDto,
      visible: false
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    show(data: LeaveBill) {
      this.visible = true
      this.leaveBill = data
      this.leaveBill.timeRange = [this.leaveBill.timeStart, this.leaveBill.timeEnd]
    },
    async modify() {
      // 数据格式化并发送
      this.leaveBillDto.leaveType = this.leaveBill.leaveType
      this.leaveBillDto.reason = this.leaveBill.reason
      if (!this.leaveBill.timeRange) {
        this.leaveBillDto.timeStart = null
        this.leaveBillDto.timeEnd = null
      } else {
        this.leaveBillDto.timeStart = this.leaveBill.timeRange[0]
        this.leaveBillDto.timeEnd = this.leaveBill.timeRange[1]
      }
      const res = await axios({
        method: 'put',
        url: '/leave/modify/' + this.leaveBill.leaveBillCode,
        data: this.leaveBillDto
      })
      this.visible = false
      this.$emit('postModify', 1)
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
